<template>
    <div class="global">
    <div class="managerleft">
    <el-row>
        <el-col :span="8">
            <el-card class="box-card" style="width: 470px;">
                <div class="user" style="width: 100%;">
                    <img src="../assets/images/user.png" alt="">
                    <div class="userinfo">
                        <p class="name">封博文</p>
                        <p class="access"> 管理员 </p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间:<span style="margin-left: 50px;">2024-7-16</span></p>
                    <p>上次登录地点:<span style="margin-left: 50px;">武汉</span></p>
                </div>
                
            </el-card>
        </el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light"></div></el-col>

    </el-row>
    
    <el-card style="margin-top: 20px; width: 470px">
        <el-table :data="TableData" style="width: 100%">
            <el-table-column prop="user" label="用户"></el-table-column>
            <el-table-column prop="diary" label="登入次数"></el-table-column>
            <el-table-column prop="gameNum" label="比赛次数"></el-table-column>
            <el-table-column prop="totalNum" label="发帖次数"></el-table-column>
            <el-table-column prop="practiceNum" label="练习次数"></el-table-column>
        </el-table>
    </el-card>
    <div class="managerRight">
    <div class="graph">
    <el-card style="height:290px; width:470px ;">
        <div id="echarts-container" style="margin-left:0px; height:300px; width: 400px;"></div>
    </el-card>
    </div>
    </div>
    </div>
    <div class="managerRight" style="margin-left: 50px;">
    <!-- 折线图 -->
    <el-card style="height:900px;width: 900px;">
        <div id="echarts-container2" style="margin-left:0px; height:850px; width: 800px;"></div>
        </el-card>
    </div>
    <button @click="onCli">测试</button>
    <!-- echarts图表 -->
    
</div>
</template>

<script lang="ts">
        // 基于准备好的dom，初始化echarts实例
    import * as echarts from 'echarts';
    import { ref, onMounted } from 'vue';
    import axios from 'axios';
    
    export default {
        
        name: 'EChartsDemo',
        
        mounted(){  
    // 基于准备好的dom，初始化echarts实例
        //let loginData1=loginData;
    

    // 指定图表的配置项和数据  
    var option1 = {  
      title: {  
        text: 'Soccer-Master'  
      },  
      tooltip: {},  
      legend: {  
        data: ['用户']  
      },  
      xAxis: {  
        type:'category',
        data: ['登录次数', '比赛次数', '发帖次数', ]  
      },  
      yAxis: {
        type:'value'
      },  
      series: [  
        {  
            data: [123, 30, 36],//
            name: '次数',  
            type: 'bar'
          
        }  
      ]  
    };  
        
        var chartDom1 = document.getElementById('echarts-container') as HTMLElement;
        var myChart = echarts.init(chartDom1);
        myChart.setOption(option1); 

    // 使用刚指定的配置项和数据显示图表。  
     
    var app = {};
    var chartDom = document.getElementById('echarts-container2') as HTMLElement;
var myChart2 = echarts.init(chartDom);

const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance
    };
    myChart.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['登入', '比赛', '发帖', '训练']
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['奇瑞', '刘尚博', '封博文', '宁明宇', '林子杨']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '登入',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data:[320, 332, 301, 334, 390]//axios.get('http://localhost:9001/UserAccount/getLoginCount')//
    },
    {
      name: '比赛',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]//axios.get('http://localhost:9001/SeriesGame/getGameCount')//
    },
    {
      name: '发帖',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]//axios.get('http://localhost:9001/Post/getNewsCount')//
    },
    {
      name: '训练',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [100,200,50,60,0]//axios.get('http://localhost:9001/Tran/getTranCount')//
    }
  ]
};

myChart2.setOption(option);
    console.log(axios.get('http://localhost:9001/Tran/getTranCount'));
    },  
        data() {
            return {
                data:[],
                TableData: [
                    {
                        user: '奇瑞',
                        diary: 320,
                        gameNum: 220,
                        totalNum: 150,
                        practiceNum:98
                    },
                    {
                        user: '刘尚博',
                        diary: 332,
                        gameNum: 182,
                        totalNum: 232,
                        practiceNum:77
                    },
                    {
                        user: '封博文',
                        diary: 301,
                        gameNum: 191,
                        totalNum: 201,
                        practiceNum:101
                    },
                    {
                        user: '宁明宇',
                        diary: 334,
                        gameNum: 234,
                        totalNum: 154,
                        practiceNum:99

                    },
                    {
                        user: '林子杨',
                        diary: 390,
                        gameNum: 290,
                        totalNum: 190,
                        practiceNum:40
                    },
                ]
            }
        },
        methods:{
          onCli(){
            console.log("click");
          }
        }
      
    
};
 

</script>



<style lang="less" scoped>
.user {
    display: flex;
    align-items: center;
    img {
        margin-right: 40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }
}
.userinfo {
    .name {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .access {
        color: #999999;
    }
}
.login-info {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;
    }
}
.graph {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;

    .el-card {
        width: 49%;
    }
}
.global{
    display: flex;
}
</style>
